<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Integrating with YUI Components (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">

<style type="text/css">
    #bd p {width:50%;}

    #statesmod {position:relative;margin-bottom:5em;}
    #statesautocomplete{position:relative;width:15em;margin-bottom:0em;}/* set width of widget here*/
    #statesinput {position:absolute;width:100%;height:1.4em;}
    #statescontainer {position:absolute;top:1.7em;width:100%}
    #statescontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #statescontainer ul {padding:5px 0;width:100%;}
    #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
    #statescontainer li.yui-ac-highlight {background:#ff0;}
    #statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>

<body>
<div id="hd">
    <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Integrating with YUI Components</h1>
</div>

<div id="bd">
    <!-- Intro -->
    <div id="intro">
        <h3>Point to Debug Builds</h3>
        <p>The debug builds of YUI components call YAHOO.log() to output log messages
        that can help you integrate and debug code. In this example, the debug
        builds of the Event Utility and the AutoComplete Widget will output
        log messages as you interact with the widget.</p>
    </div>

    <!-- AutoComplete begins -->
    <div id="statesmod">
        <form onsubmit="return YAHOO.example.AutoCompleteLogger.validateForm();">
            <h3>Type a state (will output log messages):</h3>
            <div id="statesautocomplete">
                <input id="statesinput">
                <div id="statescontainer"></div>
            </div>
        </form>
    </div>
    <!-- AutoComplete ends -->

    <!-- Sample code begins -->
    <div class="code">
        <h4>Sample Code</h4>

        <textarea name="code" class="JScript" cols="60" rows="1">
&lt;body&gt;
&lt;script type="text/javascript" src="../../build/yahoo/yahoo.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../build/event/event-debug.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../build/dom/dom.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../build/animation/animation.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../build/logger/logger.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var myLogReader = new YAHOO.widget.LogReader();
&lt;/script&gt;
&lt;/body&gt;
        </textarea>
    </div>
    <!-- Code sample ends -->
        
</div>

<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->

<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Kentucky",
    "Louisiana",
    "Maine",
    "Maryland",
    "Massachusetts",
    "Michigan",
    "Minnesota",
    "Mississippi",
    "Missouri",
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Dakota",
    "North Carolina",
    "Ohio",
    "Oklahoma",
    "Oregon",
    "Pennsylvania",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "Tennessee",
    "Texas",
    "Utah",
    "Vermont",
    "Virginia",
    "Washington",
    "West Virginia",
    "Wisconsin",
    "Wyoming"
];
</script>
<!-- In-memory JS array ends-->


<script type="text/javascript">
YAHOO.example.AutoCompleteLogger = function() {
    return {
        validateForm: function() {
            // Validate form inputs here
            return false;
        },

        init: function() {
            // Instantiate LogReader
            var oLogReader = new YAHOO.widget.LogReader();

            // Instantiate DataSource
            var oACDS = new YAHOO.widget.DS_JSArray(statesArray);

            // Instantiate AutoComplete
            var oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
            oAutoComp.queryDelay = 0;
            oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
        }
    };
}();

YAHOO.util.Event.addListener(this,'load',YAHOO.example.AutoCompleteLogger.init);
</script>

<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>
